<template>
  <div class="home">
    <h2>vuex 尝试</h2>
    <div>
      a:
      <p>{{ $store.state.a }}</p>
      <p>{{ $store.getters.doubleA }}</p>
      <p>{{ $store.getters.tripleA }}</p>
    </div>
    <div>
      调用:
      <button @click="$store.commit('addA')">a++</button>
      <button @click="$store.commit('reduceA')">a--</button>
      <button @click="$store.commit('updateA', 10)">更新A</button>
    </div>
    <div>
      异步调用:
      <button @click="$store.dispatch('addA_Async', 10)">异步a++</button>
      <button @click="test">test</button>
    </div>
    <hr>
    <div>
      b:
      <p>{{ $store.state.b }}</p>
      <p>{{ $store.getters.doubleB }}</p>
      <p>{{ $store.getters.tripleB }}</p>
    </div>
    <div>
      调用:
      <button @click="$store.commit('addB')">b++</button>
      <button @click="$store.commit('reduceB')">b--</button>
      <button @click="$store.commit('updateB', 10)">更新B</button>
    </div>
    <div>
      异步调用:
      <button @click="$store.dispatch('addB_Async', 10)">异步b++</button>
      <button @click="$store.dispatch('addB_Async_Pro', 10)">test</button>
    </div>
    <hr>
    <div>
      求和
      <p>{{ $store.getters.both }}</p>
      <p>{{ $store.getters.doubleBoth }}</p>
    </div>
    <div>
      <button @click="$store.dispatch('addBoth', { a: 10, b: 20 })">addBoth</button>
      <button @click="$store._actions.addBoth[0]({a:10,b:20})">addBoth</button>
      <button @click="$store.dispatch('addBoth_Async', { a: 10, b: 20 })">addBoth_Async</button>
      <button @click="$store.dispatch('addBoth_Async_Pro', { a: 10, b: 20 })">addBoth_Async_Pro</button>
    </div>

  </div>
</template>

<script>
// @ is an alias to /src

// $store Vue全局属性(Vue.component.$store)  =>   Vue下的所有组件(应用)都可以通过$store访问
// state      公共状态(数据)       this.$store.state.xxx
// getters    公共状态(计算属性)    this.$store.getters.xxx
// mutations  公共方法(同步)       this.$store.commit("xxx",arg)
// actions    公共方法(异步)       this.$store.dispatch("xxx",arg)

// commit 和 dispatch的两种提交数据的风格
// dispatch("actionsName",arg)     => 适用于传递单个参数(多参数传参也可以 -> 自己传入一个对象)
// this.$store.dispatch("addA_Async",10);  // 传入单参数
// this.$store.dispatch("addA_Async",{   //  传入多参数 -> 传入一个对象
//   a:10,
//   b:20
// }); 

// dispatch( options = {type}) 传入对象  
// type  触发的actions的方法名  
// 把整个对象作为arg传入  (适用于传递多个参数 -> 传对象)
// this.$store.dispatch({  // arg => {params:10}
//   type:"addA_Async",
//   params: 10,
// });


//  把store实例注入到Vue根实例 -> Vue下的所有组件(应用)都可以通过$store访问
export default {
  name: 'HomeView',
  data(){
    return {
      isLogin:true,
    }
  },
  methods: {
    async test() {
      // dispatch("actionsName",arg)     => 适用于传递单个参数(多参数传参也可以 -> 自己传入一个对象)
      // this.$store.dispatch("addA_Async",10);  // arg = 10
      // this.$store.dispatch("addA_Async",{   //  arg = {a,b}
      //   a:10,
      //   b:20
      // }); 

      // dispatch() 传入对象  
      // type  触发的actions的方法名  
      // 把整个对象作为arg传入  (适用于传递多个参数 -> 传对象)
      // this.$store.dispatch({  // arg => {params:10,a,b}
      //   type:"addA_Async",
      //   params: 10,
      //   a: 10,
      //   b: 20,
      // });

      // var res = this.$store.dispatch("addA_Async",10);
      // console.log("action方法的返回值",res);

      // this.$store.dispatch("addA_Async_Pro",10).then(()=>{
      //   alert("新增完毕");
      // })

      try {
        await this.$store.dispatch("addA_Async_Pro", 10);
        alert("新增完毕");
      } catch (err) {
        console.log(err);
      }

    }
  },
  mounted() {
    console.log("当前实例", this)
    console.log("当前实例下的store实例", this.$store)
    console.log("当前实例下的store实例", this.$store._actions.addBoth[0])
  },
}
</script>
